<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实验五</title>
    <style>
        .pj {
            cursor: pointer;
            font-size: 30px;
        }

        .fontcolor {
            color: red;
        }
    </style>
    <script src="js/jquery-2.1.1.min.js"></script>
    <script>
        window.onload = function (){
            $(".zongti .pj").click(function (e) { 
                var num = $(".zongti .pj").index(this);
                for(var i = 0;i < $(".zongti .pj").length;i++){
                    $(".zongti .pj").eq(i).removeClass("fontcolor");
                }
                for(var i = 0;i <= num;i++){
                    $(".zongti .pj").eq(i).addClass("fontcolor");
                }
            });
            $(".kouwei .pj").click(function (e) { 
                var num = $(".kouwei .pj").index(this);
                for(var i = 0;i < $(".kouwei .pj").length;i++){
                    $(".kouwei .pj").eq(i).removeClass("fontcolor");
                }
                for(var i = 0;i <= num;i++){
                    $(".kouwei .pj").eq(i).addClass("fontcolor");
                }
            });
            $(".huanjin .pj").click(function (e) { 
                var num = $(".huanjin .pj").index(this);
                for(var i = 0;i < $(".huanjin .pj").length;i++){
                    $(".huanjin .pj").eq(i).removeClass("fontcolor");
                }
                for(var i = 0;i <= num;i++){
                    $(".huanjin .pj").eq(i).addClass("fontcolor");
                }
            });
            $(".fuwu .pj").click(function (e) { 
                var num = $(".fuwu .pj").index(this);
                for(var i = 0;i < $(".fuwu .pj").length;i++){
                    $(".fuwu .pj").eq(i).removeClass("fontcolor");
                }
                for(var i = 0;i <= num;i++){
                    $(".fuwu .pj").eq(i).addClass("fontcolor");
                }
            });


        }


    </script>
</head>

<body>
        <div class="zongti">
            总体评价
            <span class="pj">&#9733;</span>
            <span class="pj">&#9733;</span>
            <span class="pj">&#9733;</span>
            <span class="pj">&#9733;</span>
            <span class="pj">&#9733;</span>
        </div>
        <div class="kouwei">
            口味评价
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
        </div>
        <div class="huanjin">
            环境评价
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
        </div>
        <div class="fuwu">
            服务评价
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
            <span class="pj">&#9733</span>
        </div>
</body>

</html>